import { useState, useRef } from 'react'
import { Input, Button } from "antd"
// import Highlight from './Highlight';
import './App.css'


function App() {
    const [value, setValue] = useState('');
    const [testValue, setTestValue] = useState('')
    const textRef: React.RefObject<HTMLDivElement> = useRef(null);

    const handleSearch = () => {
        const ele = (textRef.current as HTMLDivElement);
        const oldHtml = ele.innerHTML;
        const newHtml = oldHtml.replace(value, `<span style="color: red;">${value}</span>`);
        ele.innerHTML = newHtml;
    }

    const handleConsole = () => {
        console.log(testValue)
    }

    return (
        <>
            <div style={{ display: 'flex' }}>
                <Input value={value} onChange={(e:React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
                <Button onClick={handleSearch}>搜索</Button>
            </div>
            <div ref={textRef}>
                <p>asdasfdsjfodjgdjo这是以恶搞二五年</p>
                <Input value={testValue} onChange={(e:React.ChangeEvent<HTMLInputElement>) => setTestValue(e.target.value)} />
                <Button onClick={handleConsole}>查看</Button>
            </div>
        </>
    )
}

export default App
